<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import DiscussionVue from '@/components/Discussion.vue';

import { userinfo } from '@/stores/counter';

import type { Discussion, DiscussionCate } from '@/types/types';

import getDiscussionsByIds from '@/api/getDiscussionsByIds';
import getDiscussionCate from '@/api/getDiscussionCate';
import createDiscussion from '@/api/createDiscussion';
import { ElMessage } from 'element-plus';
import escape2html from '@/api/escape2html'

const dataPerPage = 10;

const { getDiscussionCateList } = getDiscussionCate();
const { getDiscussionsInCate, getDiscussionsInUser } = getDiscussionsByIds();
const { createDiscussionByCate } = createDiscussion();
const discussionData = ref({} as DiscussionCate);
const discussions = ref([] as Discussion[]);
const currentPage = ref(1);
const discussionsInUser = ref([] as Discussion[]);
const currentInUserPage = ref(1);
const user = userinfo();
const route = useRoute();
const router = useRouter();
const { toHtml } = escape2html()

const onEnroll = ref(false);
const loading = ref(true);
const enrollText = ref('');

const showEnroll = () => {
    ElMessage.error("暂未开放哦")
    // if (!user.login) {
    //     ElMessage.error("请先登录")
    //     return
    // }
    // onEnroll.value = true;
};

const enroll = async () => {
    if (enrollText.value === '') {
        ElMessage.error('请输入投稿内容');
        return;
    }
    const status = await createDiscussionByCate(enrollText.value, discussionData.value.id);
    if (status) {
        status.nickName = user.baseInfo.nickname;
        discussionsInUser.value.push(status)
        onEnroll.value = false;
        enrollText.value = '';
    }
};

onMounted(async () => {
    if (user.discussionCates.length == 0) {
        user.discussionCates = await getDiscussionCateList();
    }
    // 在 discussionCates 中寻找 cate_id 与 route.params.id 相同的 cate
    discussionData.value = user.discussionCates.find((cate: DiscussionCate) => cate.id === parseInt(route.params.id as string));
    if (discussionData.value === undefined) {
        router.push('/');
    }
    let datas = await getDiscussionsInCate(discussionData.value.id, currentPage.value, dataPerPage);
    if (user.login) {
        discussionsInUser.value = await getDiscussionsInUser(discussionData.value.id, parseInt(user.baseInfo.id), currentInUserPage.value, dataPerPage);
        // 从datas 中删除 discussionsInUser 中的数据
        discussions.value = datas.filter((data: Discussion) => discussionsInUser.value.findIndex((discussion: Discussion) => discussion.id === data.id) === -1);
    }
    else {
        discussions.value = datas
    }
    // viewing(parseInt(route.params.id as string),3)
    loading.value = false;
});

function goback() {
    router.go(-1)
}
</script>

<template>
    <div class="goback" @click="goback()">
        <el-icon color="#f5900a">
            <ArrowLeftBold />
        </el-icon>
    </div>
    <div class="dcate-div" v-loading="loading">

        <div class="dcate-header">
            <div class="dcate-title font-xbs">
                {{ discussionData.topic }}
            </div>
            <div class="dcate-line font-xbs"></div>
            <img src="/assets/imgs/arrow.png" class="dcate-arrow unselectable" alt="" style="height: 20px;" />
            <div class="dcate-content">
                <!-- <div v-html="toHtml(discussionData.content)"></div> -->
                <div v-html="toHtml(discussionData.content)"></div>
            </div>
            <!-- <div class="dcate-btn-div">
                <el-button class="dcate-btn font-xbs" @click="showEnroll">
                    我要投稿
                </el-button>
            </div> -->
            <div class="dcate-line font-xbs"></div>
        </div>
        <div class="dcate-enroll" v-if="onEnroll">
            <el-input v-model="enrollText" class="dcate-input" :autosize="{ minRows: 4 }" type="textarea"
                placeholder="撰写你的灵感" />
            <div class="dcate-enroll-btn-div">
                <el-button class="dcate-btn font-xbs" @click="enroll">
                    点击投稿
                </el-button>
            </div>
        </div>
        <!-- <div class="dcate-self-discussions" v-if="user.login">
            <div class="dcate-discussions-title font-xbs">
                我的投稿
            </div>
            <DiscussionVue v-for="discussion in discussionsInUser" :data="discussion" />
            <div class="dcate-no-data" v-if="discussionsInUser.length == 0">
                暂无投稿
            </div>
        </div>
        <div class="dcate-self-discussions">
            <div class="dcate-discussions-title font-xbs unse">
                热门投稿
            </div>
            <DiscussionVue v-for="discussion in discussions" :data="discussion" />
            <div class="dcate-no-data" v-if="discussions.length == 0">
                暂无投稿
            </div>
        </div> -->
    </div>
</template>

<style scoped>
.dcate-input {
    color: black !important;
    font-size: 16px;
    font-family: 'FZXBSSJ', Arial, sans-serif;
}

.goback {
    width: 40px;
    height: 40px;
    background-color: white;
    box-shadow: #475669 1px 1px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 100px;
    cursor: pointer;
}

.dcate-enroll {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.dcate-no-data {
    font-size: 20px;
    color: #666666;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 500;
}

.dcate-discussions-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.dcate-self-discussions {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    gap: 20px;
}

.dcate-btn {
    width: 120px;
    height: 40px;
    background-color: rgb(250, 205, 144);
    border-radius: 10px;
    color: #000000;
    font-size: 18px;
    font-weight: 500;
    margin-top: 20px;
    /* margin-bottom: 20px; */
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s;

}

.dcate-enroll-btn-div {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.dcate-btn-div {
    width: 70%;
    display: flex;
    justify-content: flex-end;
}

.dcate-content {
    white-space: pre-line;
    margin-top: 20px;
    font-size: 20px;
    line-height: 30px;
    /* color: #666666; */
    max-width: 1200px;
    text-align: start;
    font-weight: 500;
}

.dcate-title {
    font-size: 40px;
    font-weight: bold;
}

.dcate-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 55%;
}

.dcate-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.dcate-arrow {
    margin-top: 30px;
}

.dcate-line {
    margin-top: 20px;
    height: 1px;
    background-color: #fbdcbe;
    width: 50%;
}
</style>
